<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>淘宝衣服切换效果</title>

<style type="text/css">

	*{
		margin:0;
		padding:0;
	}

	ul{
		list-style: none;
		overflow: hidden;
	}

	ul li{
		float:left;
		width: 100px;
		height: 100px;
		margin: 20px 20px 0 2px;
		border:3px solid #fff;
	}
	
	ul li.active{
		border-color:blue;
	}




</style>
</head>
<body style="filter:grayscale()">
<!-- 过滤器，使使用过滤器的全部html转换为对应颜色 -->
	

	<img src="images/banner1.jpg" id="bigImg" alt="">
	<ul>
		<li >
			<a href=""><img src="images/banner1.jpg" width="100px" height="100px" class="smallImg"></a>
		</li>
		<li>
			<a href=""><img src="images/banner2.jpg" width="100px" height="100px" class="smallImg"></a>
		</li>
		<li>
			<a href=""><img src="images/banner3.jpg" width="100px" height="100px" class="smallImg"></a>
		</li>
		<li>
			<a href=""><img src="images/banner4.jpg" width="100px" height="100px" class="smallImg"></a>
		</li>
		<li>
			<a href=""><img src="images/banner5.jpg" width="100px" height="100px" class="smallImg"></a>
		</li>
	</ul>









<script src="jquery-3.4.1.min.js"></script>
<script type="text/javascript">

	var bigImg = document.getElementById('bigImg')
	var smallImgs = document.getElementsByClassName('smallImg')


	clearActive = function (){
			for(var j=0; j<smallImgs.length; j++){
				smallImgs[j].parentNode.parentNode.setAttribute("class","")
			}
	} 


	for(var i=0; i<smallImgs.length; i++){
		//遍历集合，然后给每个img标签添加事件
		
		//g给鼠标悬浮的img标签的父标签的父标签 添加一个类
		smallImgs[i].onmouseover = function(){
			clearActive()

			// 修改大图的src
			var smallImgSrc = this.getAttribute('src')
			// console.log(smallImgSrc)//可打印出对应图片的SRC路径
			bigImg.setAttribute("src",smallImgSrc)

			this.parentNode.parentNode.setAttribute("class","active")
		}
	}







</script>


</body>
</html>